
window.onload=function(){
  
    var timer=null
    var ban=document.getElementById('bannerUl')
    var bannerImg=document.getElementsByClassName('bannerImg')
    var index
    Animation(ban,-3040)
function Animation(obj,target){
    
    var speed=0
    clearInterval(obj.timer)
     obj.timer=setInterval(function(){
       
        speed=(target-parseInt(obj.style.left))>0?152:-152
         index=Math.floor(0-parseInt(obj.style.left)/760)

          if(index==4){
               bannerImg[index].style.opacity=0.5
            //    bannerImg[index].style.tranform='scale(0.9)'
               bannerImg[0].style.opacity=1
               bannerImg[1].style.opacity=0.5
               for(var i=0;i<5;i++){
                if( bannerImg[i].style.opacity == 0.5){
                  bannerImg[i].style.tranform='scale(0.8)'
                   console.log( bannerImg[index].style.height)
            }
            else{
              bannerImg[i].style.tranform='scale(1)'
            }
            }
            
          }
          else if(index==3){
            bannerImg[index].style.opacity=0.5
            bannerImg[4].style.opacity=1
            bannerImg[0].style.opacity=0.5
            for(var i=0;i<5;i++){
                if( bannerImg[i].style.opacity ==0.5){
                  bannerImg[i].style.tranform='scale(0.8)'
                   console.log( bannerImg[index].style.height)
            }
            else{
              bannerImg[i].style.tranform='scale(1)'
            }
            }
            
          }
          else{
            bannerImg[index].style.opacity=0.5
            bannerImg[index+1].style.opacity=1
            bannerImg[index+2].style.opacity=0.5
            for(var i=0;i<5;i++){
                if( bannerImg[i].style.opacity ==0.5){
                  bannerImg[i].style.tranform='scale(0.8)'
                   console.log( bannerImg[index].style.height)
            }
            else{
              bannerImg[i].style.tranform='scale(1)'
            }
            }
            
          }
         
        //   for(var i=0;i<5;i++){
        //       if( bannerImg[i].style.opacity ==0.5){
        //         bannerImg[i].style.tranform='scale(0.8)'
        //          console.log( bannerImg[index].style.height)
        //   }
        //   else{
        //     bannerImg[i].style.tranform='scale(1)'
        //   }
        //   }
          

        if(parseInt(obj.style.left)%760 == 0){
         
        //   console.log(index)
         
           
            // bannerImg[index].style.tranform ='scale(0.9,1)'
            // console.log(parseInt(bannerImg[index].style.width))
           if(target==parseInt(obj.style.left)){
            obj.style.left=0  
        }
          setTimeout(function(){
            // bannerImg[index].style.tranform='scale(1,1)'
          obj.style.left=parseInt(obj.style.left)+speed+'px'
         
          },200)
           }
           else{ 
            obj.style.left=parseInt(obj.style.left)+speed+'px'
            // obj.style.display='block' 
           }  
     

       
       
    },300)

}
  document.querySelector('#sear').onclick=function(){
            var content=this.previousElementSibling.value
            if(content !=''){
                   localStorage['caipu']=JSON.stringify([{"cook":content}])    
            location.href="Menu1.html"
            }
         

        }
var sear= document.querySelector('#sear')
       sear.onmouseover=function(){
        sear.previousElementSibling.style.display='block'
        sear.previousElementSibling.style.visibility='visible'
            // console.log(parseInt(this.previousElementSibling.style.width))
           var speed=0
       clearInterval(sear.timer)
      sear.timer=setInterval(function(){
        speed=5
        if( parseInt(sear.previousElementSibling.style.width)== 135){
            clearInterval(sear.timer)
        }
        else{
            sear.previousElementSibling.style.width=parseInt(sear.previousElementSibling.style.width)+speed+'px'
        }
    },100)
    sear.onmouseleave=function(){
        if( parseInt(sear.previousElementSibling.style.width) != 135){
               this.previousElementSibling.style.width=0+'px'
        this.previousElementSibling.style.display='none'
        this.previousElementSibling.style.visibility='hidden'
        }
     
    }  

        }
         var newUl=document.createElement('ul')
document.querySelector(' .nav01>li:nth-child(5)>input:first-child').onclick=function(){
    newUl.style.position='absolute'
    newUl.style.backgroundColor='white'
    newUl.style.left=20+'px'
    newUl.style.top=20+'px'
    newUl.style.zIndex=4
    newUl.style.width=100+'px'
     var str=``
   str =`<li><a>茄汁鱼柳</a></li>
   <li><a>溜肉段</a></li>
   <li><a>锅包肉</a></li>
   <li><a>减肥餐</a></li>
   `
     newUl.innerHTML=str
     document.querySelector('.nav01>li:nth-child(5)').appendChild(newUl)
   newUl.lastElementChild.previousElementSibling.onclick=function(){
       localStorage['caipu']=JSON.stringify([{"cook":"锅包肉"}])
       location.href="Menu1.html"
   }
   newUl.lastElementChild.previousElementSibling.previousElementSibling.onclick=function(){
    localStorage['caipu']=JSON.stringify([{"cook":"溜肉段"}])
    location.href="Menu1.html"
}
     document.querySelector('.nav01>li:nth-child(5)').onmouseleave=function(){
    newUl.innerHTML=`` 
    str=``
    
}

}
document.querySelector('.nav01>li:nth-child(2)>dl:nth-child(3)>dd:nth-child(3)').onclick=function(){
    localStorage['caipu']=JSON.stringify([{"cook":"北方菜"}])
    location.href="Menu1.html"
}
document.querySelector('.nav01>li:nth-child(2)>dl:nth-child(3)>dd:nth-child(4)').onclick=function(){
    localStorage['caipu']=JSON.stringify([{"cook":"川菜"}])
    location.href="Menu1.html"
}
document.querySelector('.nav01>li:nth-child(2)>dl:nth-child(3)>dd:nth-child(2)').onclick=function(){
    localStorage['caipu']=JSON.stringify([{"cook":"粤菜"}])
    location.href="Menu1.html"
}
document.querySelector('.nav01>li:nth-child(2)>dl:nth-child(3)>dd:nth-child(6)').onclick=function(){
    localStorage['caipu']=JSON.stringify([{"cook":"湖北菜"}])
    location.href="Menu1.html"
}
document.querySelector('.nav01>li:nth-child(2)>dl:nth-child(3)>dd:nth-child(5)').onclick=function(){
    localStorage['caipu']=JSON.stringify([{"cook":"浙菜"}])
    location.href="Menu1.html"
}
if(localStorage['userInfo']){
    var productInfos=JSON.parse(localStorage['userInfo'])
    var strHtml=''
    var product=productInfos[ productInfos.length-1][0]
    strHtml +=`<li>${product.name}</li>`
    document.querySelector('.nav01>span').innerHTML=strHtml
    document.querySelector('.nav01>li:nth-child(7)').style.display='none'

}

else{
    document.querySelector('.nav01>span').innerHTML=null
    document.querySelector('.nav01>li:nth-child(7)').style.display='block'
}
document.querySelector('.nav01>span').onclick=function(){
    location.href="user.html"
}
var data=[{
    "imgPath":"./images/b05.jpg",
    "title":"#我要上首焦#懒人版荷包蛋焖面by短妈美食记◎"
},
{
    "imgPath":"./images/b06.jpeg",
    "title":"#我要上首焦#懒人版荷包蛋焖面by短妈美食记◎"
},
{
    "imgPath":"./images/b13.jpeg",
    "title":"#我要上首焦#懒人版荷包蛋焖面by短妈美食记◎"
},
{
    "imgPath":"./images/b21.jpeg",
    "title":"#我要上首焦#懒人版荷包蛋焖面by短妈美食记◎"
},
{
    "imgPath":"./images/b09.jpg",
    "title":"#我要上首焦#懒人版荷包蛋焖面by短妈美食记◎"
},
{
    "imgPath":"./images/b18.jpeg",
    "title":"#我要上首焦#懒人版荷包蛋焖面by短妈美食记◎"
},
{
    "imgPath":"./images/b26.jpg",
    "title":"#我要上首焦#懒人版荷包蛋焖面by短妈美食记◎"
},
{
    "imgPath":"./images/b12.jpeg",
    "title":"#我要上首焦#懒人版荷包蛋焖面by短妈美食记◎"
},
{
    "imgPath":"./images/k01.jpg",
    "title":"#我要上首焦#懒人版荷包蛋焖面by短妈美食记◎"
},
{
    "imgPath":"./images/b14.jpeg",
    "title":"#我要上首焦#懒人版荷包蛋焖面by短妈美食记◎"
}
]

    initData()

function initData(){
    var selections=document.querySelector('.selections')
    var strHtml=''
    for(var i=0;i<data.length;i++){
        if(data[i]){
            strHtml +=` <div >
            <img src="${data[i].imgPath}">
            <div >${data[i].title}</div>
            </div>
            `

        }
    }
    selections.innerHTML +=strHtml

}
var all= document.querySelectorAll('.person>ul>li>input')

   for(var i=0;i<all.length;i++){
      
  all[i].addEventListener('click',function(){

     if( this.value=="+关注"){
         this.value="已关注"
     }
     else if(this.value=="已关注"){
        this.value="+关注"
     }
  })


    
}
var data1=[{
    "imgPath":"./images/b05.jpg",
    "title":"土豆"
},
{
    "imgPath":"./images/b06.jpeg",
    "title":"土豆"
},
{
    "imgPath":"./images/b13.jpeg",
    "title":"土豆"
},
{
    "imgPath":"./images/b21.jpeg",
    "title":"土豆"
},
{
    "imgPath":"./images/b09.jpg",
    "title":"土豆"
},
{
    "imgPath":"./images/b18.jpeg",
    "title":"土豆◎"
},
{
    "imgPath":"./images/b26.jpg",
    "title":"土豆"
},
{
    "imgPath":"./images/b12.jpeg",
    "title":"土豆"
},
{
    "imgPath":"./images/b12.jpeg",
    "title":"土豆"
},
{
    "imgPath":"./images/b12.jpeg",
    "title":"土豆"
}
]

    initData1()

function initData1(){
    var foods=document.querySelector('.hotFood')
    var strHtml=''
    for(var i=0;i<data1.length;i++){
        if(data1[i]){
            strHtml +=` <div> 
            <a href=""> 
               <img src="${data1[i].imgPath}" alt="">   
               <span>${data1[i].title}</span>  
             </a></div>
            `

        }
    }
    foods.innerHTML +=strHtml

}


}
 
